<template>
  <view class="page-container">
    <view class="header">
      <text class="title">最新咨询</text>
    </view>

    <view class="news-list">
      <view v-for="i in 5" :key="i" class="news-item">
        <image class="news-image" :src="$img('images/news.jpg')" mode="aspectFill" />
        <view class="news-content">
          <text class="news-title">演唱会最新动态 {{i}}</text>
          <text class="news-desc">关于近期演唱会的票务信息及注意事项说明</text>
          <text class="news-time">发布时间:12-{{i < 10 ? '0'+i : i}} 09:00</text>
        </view>
      </view>
    </view>

    <custom-tab-bar :current="2" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/custom-tab-bar.vue'

export default {
  components: {
    CustomTabBar
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 40rpx 30rpx;
  padding-bottom: 170rpx;
}

.header {
  margin-bottom: 60rpx;
  
  .title {
    font-size: 36rpx;
    color: #333;
    font-weight: 600;
  }
}

.news-list {
  display: grid;
  gap: 40rpx;
}

.news-item {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  display: flex;
  
  .news-image {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
  }
  
  .news-content {
    padding: 30rpx;
    flex: 1;
    
    .news-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 15rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .news-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .news-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

@media (max-width: 375px) {
  .page-container {
    padding: 30rpx 20rpx;
  }
  
  .news-item {
    flex-direction: column;
    
    .news-image {
      width: 100%;
      height: 300rpx;
    }
    
    .news-content {
      padding: 20rpx;
      
      .news-title {
        font-size: 28rpx;
      }
    }
  }
}
</style> 